<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <link href="styles.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阅读清单</title>
  </head>
  <body>
    <div id="wrapper">
      <header>
        <div id="page-banner">
          <h1 class="title">阅读清单</h1>
          <p>清单里收纳着全部未来的相遇</p>
          <form id="search-books">
            <input type="text" placeholder="搜索书籍..." />
          </form>
        </div>
      </header>
      <div id="book-list">
        <h2 class="title">待读书籍</h2>
        <ul>
          <li>
            <span class="name">西线无战事</span>
            <span class="delete">删除</span>
          </li>
          <li>
            <span class="name">认知与设计：理解UI 设计准则</span>
            <span class="delete">删除</span>
          </li>
          <li>
            <span class="name">新异化的诞生：社会加速批判理论大纲</span>
            <span class="delete">删除</span>
          </li>
          <li>
            <span class="name">不要为明天担忧</span>
            <span class="delete">删除</span>
          </li>
          <li>
            <span class="name">极简主义者的家</span>
            <span class="delete">删除</span>
          </li>
        </ul>
      </div>
      <form id="add-book">
        <input type="checkbox" id="hide" />
        <label for="hide">隐藏所有书籍</label>
        <input type="text" placeholder="添加书籍..." />
        <button>添加</button>
      </form>
      <footer>
        <ul class="tabs">
          <li data-target="#about" class="active">关于清单</li>
          <li data-target="#contact">联系我们</li>
        </ul>
        <div class="panel active" id="about">
          <p>阅读清单是一款帮助你管理阅读计划的工具。</p>
          <p>
            在这里，你可以记录想要阅读的书籍，追踪阅读进度，还能通过搜索快速找到清单中的书籍。无论是经典名著还是热门新书，都可以轻松添加到你的专属阅读清单中，让阅读计划更有条理。
          </p>
        </div>
        <div class="panel" id="contact">
          <p>如果你有任何建议或问题，欢迎联系我们：</p>
          <p>
            邮箱：contact@readinglist.com<br />
            微信：ReadingListService<br />
            工作时间：周一至周五 9:00-18:00
          </p>
        </div>
      </footer>
    </div>
    <script src="app.js"></script>
  </body>
</html>
